import services from '@/services/ssh';
import {ActionType, PageContainer, ProColumns, ProTable,} from '@ant-design/pro-components';
import { Select, Tooltip } from 'antd';
import React, {useEffect, useRef, useState} from 'react';

const { usePort } = services.PortController;
const { listSSH } = services.SshInfoController;

const TableList: React.FC<unknown> = () => {
    const actionRef = useRef<ActionType>();
    // 分页
    const [current, setCurrent] = useState(1); // 当前页码
    const [pageSize, setPageSize] = useState(10); // 每页显示条数

    // 添加服务器ID状态
    const [serverId, setServerId] = useState<string>();
    // 添加服务器列表状态
    const [serverList, setServerList] = useState<API.SshInfo[]>([]);

      // 初始化获取服务器列表
      useEffect(() => {
        const fetchServerList = async () => {
          const response = await listSSH();
          if (response.success) {
            setServerList(response.data || []);
          }
        };
        fetchServerList();
      }, []);



    // 列表数据接口
    const columns: ProColumns<API.UsePortInfo>[] = [
        {
            title: '协议',
            dataIndex: 'protocol',
            valueType: 'text',
            search: false,
        },
        {
            title: '状态',
            dataIndex: 'state',
            valueType: 'text',
            search: false,
        },
        {
            title: 'IP',
            dataIndex: 'localAddress',
            valueType: 'text',
            ellipsis: true, // 启用文本省略
            search: false,
        },
        {
            title: '端口',
            dataIndex: 'port',
            valueType: 'text',
            copyable: true,
            search: false,
            tooltip:"备用的端口",
        },
        {
          title: '进程',
          dataIndex: 'process',
          valueType: 'text',
          copyable: true,
          ellipsis: true,
          search: false,
          renderText: (text, record) => {
            return record.jarName ? record.jarName : text;
          }
        },
        {
          title: 'PID',
          dataIndex: 'pid',
          copyable: true,
          valueType: 'text',
          search: false,
      },
        
    ];

    return (
        <PageContainer
          header={{
            title: '',
            extra: [
              <Select
                key="serverSelect"
                placeholder="请选择服务器"
                style={{ width: 200 }}
                onChange={(value) => {
                  setServerId(value);
                  // 重置分页
                  setCurrent(1);
                  // 触发表格刷新
                  actionRef.current?.reload();
                }}
                options={serverList.map((server) => ({
                  label: server.name,
                  value: server.id,
                }))}
              />,
            ],
          }}
        >
          <ProTable<API.UsePortInfo>
              headerTitle=""
              actionRef={actionRef}
              rowKey="id"
              search={false}
              pagination={{
                current, // 当前页码
                pageSize, // 每页条数
                showSizeChanger: true, // 是否可以改变 pageSize
                pageSizeOptions: ['5', '10', '20', '50'], // 自定义每页条数下拉选项
                onChange: (page, pageSize) => { // 页码或 pageSize 改变的回调。
                  setCurrent(page);
                  setPageSize(pageSize);
                },
                onShowSizeChange: (current, size) => {// pageSize 改变的回调。
                  setCurrent(current);
                  setPageSize(size);
                },
              }}
              // , sorter, filter
              request={async (params) => {
                if (!serverId) {
                  return {
                    data: [],
                    total: 0,
                    success: true,
                  };
                }
                const { data, success } = await usePort(serverId);
                return {
                    data: data|| [],
                    total: data?.length,
                    success,
                };
              }}
              columns={columns}
        />
      </PageContainer>
    );
};

export default TableList;
